<template>
    <div class="wifi" style="margin-left: 10px;">
        <el-button size="large" circle :type="userStore.isOnline ? 'primary' : 'danger'" @click="triggerWifi">
            <SvgIcon :name="userStore.isOnline ? 'wifi-fill' : 'wifi-off-fill'" color="#fff" size="24" />
        </el-button>
        <el-dialog v-model="visible"  title="提示" width="600">
            <span style="font-size: 16px;line-height: 1.5;">离线模式将无法识别会员，仅支持线下支付，确认切换为离线模式?</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="visible=false">取消</el-button>
                    <el-button size="large" type="primary" @click="confirm">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import {ref} from 'vue'
import { useUserStore } from '@renderer/store/user'
const userStore = useUserStore()
const visible = ref(false)
function triggerWifi() {
    const isOnline = userStore.isOnline
    if(isOnline){
        visible.value = true
    }else{
        userStore.setOnline(true)
    }
    
}
function confirm(){
    userStore.setOnline(false)
    visible.value = false
}
</script>